<template>
	<view class="cart">
		<view class="ul">
				<uni-swipe-action-item :right-options="options" v-for="(item,index) in getCarList" v-if="item.show == false"
					@click="bindClick(item)" @change="swipeChange($event, index)" autoClose  :key="index"> 
					<view class="li">
						<view class="shop">
							<view class="rabio">
								<image src="../../static/cz_zc@2x.png" v-show="item.selected == false" @click="select(item)"></image>
								<image src="../../static/cz_xz@2x.png" v-show="item.selected == true" @click="select(item)"></image>
							</view>
							<view  class="shop-deltail" @click="toDetail(item.goodId)">
								<view class="good-image">
								<image :src="item.goodImg"></image>
								</view>
								<view class="name">
									<view class="header">{{item.goodName}}</view>
									<view class="price">￥{{item.goodPrice}}</view>
									<view class="price2">￥{{price(item)}}</view>
								</view>
							</view>
						</view>
						<view class="box">
							<u-number-box 
							class="number-box"
								v-model="item.count"
							    button-size="30"
							    color="#939395"
							    iconStyle="color: #969697"
								 @change="onchange(item)"
							></u-number-box>
						</view>
					</view>
				</uni-swipe-action-item>
		</view>
		<view class="btn">
			<view class="quan">
				<image src="../../static/cz_zc@2x.png" v-show="isShow == false" @click="quan()"></image>
				<image src="../../static/cz_xz@2x.png" v-show="isShow == true" @click="quan()"></image>
				<view class="text">全选</view>
			</view>
			<view class="buttom">
				<view class="sum">合计:<text>￥{{sumPrice}}</text></view>
				<u-button shape="circle" type="error" @click="addOrder()">结算</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {apiCartGoods} from '../../api/mock.js'
	import {mapGetters,mapActions} from 'vuex'
	export default {
		data() {
			return {
				show: false,
				carts:this.getCarList,
				isShow:false,
				check:[],
				order:{},
				isDel:0,
			}
		},
		onLoad() {
				// this.getCartGoods();
		},
		watch:{
			getCarList(e){
				if(e.length>0){
					this.ifShow();
				}
			}
		},
		computed:{
			...mapGetters('carts',['getCarList','getCartLen']),
			...mapGetters('orders',['getOrderList']),
			price(){
				return (item) =>{
					let sum = item.goodPrice*item.count;
					return sum;
				}
			},
			sumPrice(){
				let sumPrice = 0;
				console.log(this.getCarList);
				this.getCarList.forEach((item)=>{
					if(item.selected==true && item.show == false){
						sumPrice += item.goodPrice*item.count;
					}
				});
				return sumPrice;
			}
		},
		methods: {
			...mapActions('orders',['addOrders','delOrders']),
			...mapActions('carts',['UpCart']),
			addOrder(){
				this.delOrders();
				let shop = this.getCarList.filter(index => index.selected == true && index.show == false);
				if(shop.length == 0){
					uni.showToast({
						icon:'error',
						title:'请选择商品'
					})
					return;
				}
				this.getCarList.forEach((item)=>{
					if(item.selected){
						this.addOrders(item);
					}
				})
				uni.navigateTo({
					url:'/pagesD/pay-detail/pay-detail'
				})
			},
			toDetail(id){
				uni.navigateTo({
					url:'/pagesA/detail/detail?id='+id,
				})
			},
			bindClick(e){
			      uni.showModal({
			      	title:'提示',
			      	content:'是否删除当前购物车',
			      	success:(res)=>{
			      		if(res.confirm){
							e.show = true
							e.selected = false;
							this.UpCart(e)
			      			uni.showToast({
			      				title:'删除成功',
			      			})
			      			this.ifShow();
			      		}else if(res.cancel){
			      			uni.showToast({
			      				title:'已取消',
			      				icon:'none'
			      			})
			      		}
			      	}
			      })
				
			},
		    swipeChange(e,index){
			      console.log('当前状态：'+ e +'，下标：' + index)
			},
			onchange(item){
				setTimeout(()=>{
					item.selected = true;
					this.UpCart(item);
					this.ifShow();
				},100)
				
			},
			select(item){
				item.selected = !item.selected;
				console.log(item);
				this.UpCart(item);
				this.ifShow();
			},
			quan(){
				this.isShow = !this.isShow;
				this.getCarList.forEach((item)=>{
					if(this.isShow){
						item.selected = true;
					}else{
						item.selected = false;
					}
				})
			},
			// getCartGoods(){
			// 		this.carts=[...this.getCarList];
			// 	    console.log(this.carts);
			// },
			ifShow(){
				console.log(this.getCarList.length);
				let len = this.getCarList.filter(index => index.selected == true && index.show == false).length;
				console.log(len);
				let len1 = this.getCarList.filter(j => j.show == false).length;
				console.log(len1);
				if(len == len1 && len1>0){
					this.isShow  = true;
				}else{
					this.isShow  = false;
				}
			}
		}
	}
</script>

<style scoped>
	.cart {
		padding: 10px;
		position: relative;

		.ul {
			padding-bottom: 60px;
			width: 100%;

			.li {
				width: 100%;
				margin-top: 10px;

				.shop {
					display: flex;

					.shop-deltail {
						display: flex;
						overflow: hidden;

						.good-image image {
							width: 100px;
							height: 100px;
						}

						.name {
							overflow: hidden;
							padding: 5px;

							.header {
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								font-size: 18px;
								color: gray;
							}

							.price {
								font-size: 12px;
								color: gainsboro;
								margin-top: 10px;
							}

							.price2 {
								font-size: 20px;
								margin-top: 10px;
							}
						}
					}

					.rabio {
						padding: 10px;
						margin: auto;
					}

					.rabio image {
						width: 20px;
						height: 20px;
					}
				}

				.box {
					width: 100%;
					margin-left: 65%;
				}
			}
		}

		.btn {
			width: 100%;
			height: 50px;
			line-height: 50px;
			font-weight: bold;
			position: fixed;
			bottom: 50px;
			/*#ifdef  MP-WEIXIN*/
			bottom: 0px;
			/*#endif*/
			background-color: white;
			left: 0;
			z-index: 100;

			.quan {
				float: left;
				display: flex;
			}

			.buttom {
				float: right;
				display: flex;

				.sum text {
					padding: 10px;
					font-weight: 400;
					color: red;
				}
			}

			.buttom button {
				width: 80px;
				height: 40px;
				margin: auto;
				line-height: 40px;
				margin-right: 10px;
			}
		}

		.btn image {
			width: 20px;
			height: 20px;
			padding: 15px;
		}
	}
</style>